<template>
    <div>
        
        <div class="searchForm">
            <div>
                发生日期： 
				<el-date-picker
				      v-model="time"
					  size="mini"
					  value-format="yyyy-MM-dd"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				</el-date-picker>	
            </div>
			<div style="margin-right: 30px;">
			    截止日期末{{ttype==1?'付款':'收款'}}： 
				<el-checkbox  v-model="checked"></el-checkbox>
			</div>
            <!-- <div>
                经手人： 
				<el-input size="mini" v-model="search_form.buyer_person" 
				placeholder="请输入经手人"  
				style="width:150px;"></el-input>
            </div>
            <div >
				<div style="display: flex;" v-if="ttype==1">
					<div>
						供应商：
					</div>
					<div>
						<selectCustomer :supp="search_form.supplier" @getCustomerName="getCustomerName" />
					</div>
				</div>
				<div style="display: flex;" v-if="ttype==2">
					<div>
						客户：
					</div>
					<div>
						<selectCustomer 
						 holder="请输入客户名称"
						 :supp="search_form.customer" @getCustomerName="getCustomerName" />
					</div>
				</div>
            </div> -->
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
        </div>
        <br>
		
        <el-table  :data="list"  
			 border  
			 show-summary
			  :summary-method="getSummaries"
			 :span-method="objectSpanMethod"
			 :row-class-name="tableRowClassName"
			>
			<el-table-column   align="center" width="150"  :label="ttype==1?'供应商':'客户'">
				<template slot-scope="scope">
				   <div>
						<span v-if="ttype==1">{{scope.row.supplier}}</span>
						<span v-else>{{scope.row.customer}}</span>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center" width="150"  label="收款账户">
				<template slot-scope="scope">
				   <div v-if="scope.row.back_info">
						<!-- <span v-if="ttype==1">{{scope.row.supplier}}</span>
						<span v-else>{{scope.row.customer}}</span> -->
				
						<span v-if="scope.row.back_info.type==1">支付宝</span>
						<span v-if="scope.row.back_info.type==3">微信</span> 
						<span v-if="scope.row.back_info.type==2">{{scope.row.bank_name}}</span>
						<br />
						<span v-if="scope.row.back_info.type==1 || scope.row.back_info.type==3">
							<!-- {{$utils.geTel(card_info.account_number)}} -->
							{{scope.row.back_info.account_number}}
						</span>
						<span v-if="scope.row.back_info.type==2">
							<!-- {{card_info.account_number.replace(/(?<=\d{4})\d+(?=\d{4})/,"****")}} -->
							{{scope.row.back_info.account_number}}
						</span>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="300px" prop="goods_name"  label="商品名称" />
			<el-table-column   align="center"  width="100px" label="类型">
				<template slot-scope="scope">
				   <div v-if="ttype==1 && scope.row.id!='小计'">
						{{scope.row.code?'货款':'预付'}}
				   </div>
				   <div v-if="ttype==2 && scope.row.id!='小计'">
				   		{{scope.row.code?'货款':'预收'}}		
						
				   </div>
				</template>
				
			</el-table-column>
            <el-table-column   align="center" prop="buyer_date" width="130px" 
				label="发生日期" />
			<el-table-column  align="center" width="100"   label="单据号">
				<template slot-scope="scope">
				   <div v-if="scope.row.id!='小计'">
						<el-button @click="toPutPayInfo(scope.row)"
							v-if="scope.row.order_number"
							type="text" >
							{{$utils.sliceStr(scope.row.order_number,6)}}
						</el-button>
				   </div>
				</template>
			</el-table-column>	
			<el-table-column   align="center" prop="price" width="130px"
				label="单价" />
			<!-- <el-table-column   align="center"  width="100px" label="单价">
				<template slot-scope="scope">
				   <div v-if="ttype==1 && scope.row.id!='小计'">
						{{scope.row.price}}
				   </div>
				   <div v-if="ttype==2 && scope.row.id!='小计'">
						{{scope.row.code?scope.row.sales_price:scope.row.price}}
				   </div>
				</template>
			</el-table-column> -->
			<el-table-column   align="center" prop="goods_number" width="130px"
				label="数量" />
			<el-table-column   align="center" prop="original_amount" width="130px"
				label="原始金额" />
			<!-- <el-table-column   align="center"  width="100px" label="原始金额">
				<template slot-scope="scope">
				   <div v-if="scope.row.id!='小计'">
						{{scope.row.price*scope.row.goods_number}}
				   </div>
				</template>
			</el-table-column>	 -->
			<el-table-column   align="center"   :label="ttype==1?'未付金额':'未收金额'">
				<template slot-scope="scope">
				   <div v-if="scope.row.code">
						<span v-if="ttype==1">{{scope.row.residue_money}}</span>
						<span v-else>{{scope.row.residue_money_put}}</span>
				   </div>
				   <div v-else>
					   {{scope.row.residue_money}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column   align="center" prop="remark" label="摘要" />
			
			
        </el-table>
		
		
		
    </div>
</template>
<script>
	import selectCustomer from "@/components/selectCustomer"
    export default {
        components:{
			selectCustomer
        },
        data(){
            return {
                search_form:{
					buyer_person:"",
					supplier:"",
					bank_account:"",
					start_time:'',
					end_time:'',
					customer:''
                },
				time:[],
				backList:[],
				sumResult:{
					goods_number:0,
					original_amount:0,
					residue_money:0
				},
				checked:true,
				ttype:1
            }
        },
        mounted(){
			// this.search_form.buyer_person = sessionStorage.getItem('user_name')
			let now = this.$utils.formatNowDate(2)
			this.time = [now,now]
			// this.lodeSupplier()
			this.lodeList()
        },
        methods:{
			lodeSupplier(){
				if(this.time.length==2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}
				// 1 付款 2收款
					this.search_form.type = this.ttype
					this.search_form.checked = this.checked
				this.$post('/putpay/getSupplier',this.search_form,res=>{
					
				})
			},
			getSummaries(param){
				
				let residue_money = this.sumResult.residue_money.toFixed(2)
				let goods_number = this.sumResult.goods_number
				let original_amount = this.sumResult.original_amount.toFixed(2)
				
				var sums=['总计','','','','','','',goods_number,original_amount,residue_money,'']
				return sums 
			},
			tableRowClassName({row, rowIndex}) {
				console.log(row.id)
				    if(row.id == '小计'){
						 return 'warning-row';
					}
			        // if (rowIndex === 1) {
			        //   return 'warning-row';
			        // } else if (rowIndex === 3) {
			        //   return 'success-row';
			        // }
			        return '';
			},
			objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			        if (columnIndex === 0 || columnIndex === 1) {
			          if (row.sumRowSpan > 1) {
			            return {
			              rowspan: row.sumRowSpan,
			              colspan: 1
			            };
			          } else {
			            return {
			              rowspan: 0,
			              colspan: 0
			            };
			          }
			        }
			},
			// changeOnePay(scope){
			// 	let index = scope.$index
			// 	let row = scope.row
			// 	if(row.price - row.one_pay < 0){
			// 		this.$message.error('剩余金额不能小于0')
			// 		this.list[index].one_pay = ''
			// 		this.list[index].residue_money = row.price
			// 	}else{
			// 		this.list[index].residue_money = row.price - row.one_pay
			// 	}
			// 	if(row.price - row.one_pay == 0){
			// 		this.list[index].residue_money = '0.00'
			// 	}
			// },
			// callPayPut(type){
			// 	let order_number = this.$utils.generateRandomString(2)
			// 	for(let item of this.selectGoods){
			// 		item.is_settle = type+'',
			// 		item.type = this.search_form.type
			// 		item.hander_person = sessionStorage.getItem('user_name')
			// 		item.prepared_by = sessionStorage.getItem('user_name')
			// 		item.order_number = order_number
			// 	}
			// 	this.$post('/putpay/callPutPay',this.selectGoods,res=>{
			// 		if(res.data.code == 200){
			// 			this.$message.success('操作成功')
			// 			this.lodeList()
			// 		}
			// 	})
			// },
		    sumTotal(array){
				let original_amount = 0
				let residue_money = 0
			    let goods_number = 0
				for(let item of array){
					if(item.cid){
						goods_number++
						original_amount = original_amount+item.original_amount*1
						if(this.ttype==1){
							residue_money+=item.residue_money*1
						}else{
							let money_put = item.code?item.residue_money_put:item.residue_money
							residue_money+=money_put*1
						}
						
					}
				}
				this.sumResult = {
					residue_money,goods_number,original_amount
				}
			},
			toPutPayInfo(row){
				// 1 未付款去采购入库 2未收款去快速批发
				let ttype = this.ttype
				//有code 是货款 没有是预收
				let code = row.code
				if(ttype==1){
					if(code){
						this.$router.push({
							path:'/buyerSys/buyerInfo',
							query:{
								order_number:row.order_number
							}
						})
					}else{
						this.$router.push({
							path:'/settlementSys/settlementPay',
							query:{
								order_number:row.order_number
							}
						})
					}
				}else{
					if(code){
						this.$router.push({
							path:'/wholesalerSys/wholesaler',
							query:{
								order_number:row.order_number
							}
						})
					}else{
						this.$router.push({
							path:'/settlementSys/settlementPut',
							query:{
								order_number:row.order_number
							}
						})
					}
				}
			},
			lodeList(){
				if(this.time.length==2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}
				// 1 付款 2收款
					this.search_form.type = this.ttype
					this.search_form.checked = this.checked
				this.$post('/putpay/getPayPutData',this.search_form,res=>{
					let list = res.data.data
					
					
					// for(let item of list){
					// 	item.list = this.$utils.mergeDuplicates(item.list);
					// }
					
					for(let item1 of list){
						let newArr = []
						for(let el of item1.list){
							
							if(el.code){
								if(this.ttype==2){
									el.price = el.sales_price
								}
								el.residue_money = el.residue_money?el.residue_money:el.price
								el.residue_money_put = el.residue_money_put?el.residue_money_put:el.price
							}else{
								el.price = -el.price
								el.residue_money = el.residue_money?el.residue_money:el.price
							}
							if(this.ttype==1){
								el.one_pay = el.residue_money
							}else{
								if(el.code){
									el.one_pay = el.residue_money_put
								}else{
									el.one_pay = el.residue_money
								}
								
							}
						
							el.original_amount = el.price
							newArr.push(el);
						}
						item1.list = newArr
					}
					
					
					
					let result = []
					
					//  scope.row.residue_money?scope.row.residue_money:scope.row.price
					for(let item of list){
						let goods_number = 0
						let residue_money = 0
						let original_amount = 0
						let len = item.list.length
						item.list[0].sumRowSpan = len+1
						
						for(let ele of item.list){
							goods_number = goods_number+ele.goods_number*1
							original_amount = original_amount + ele.original_amount*1
							if(this.ttype==1){
								residue_money+=ele.residue_money*1
							}else{
								let money_put = ele.code?ele.residue_money_put:ele.residue_money
								
								residue_money+=money_put*1
							}
							
							
						}
						item.list.push(
						 {
							 id:'小计',
							 goods_name:len,
							 goods_number:goods_number,
							 residue_money:residue_money,
							 original_amount:original_amount
						 }
						)
						for(let ele of item.list){
							result.push(ele)
						}
						
						
					}
					
					
					this.list = result
					console.log(result,77777)
					
				})
			},
			lodeList1(){
				if(this.time.length==2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}
				// 1 付款 2收款
					this.search_form.type = this.ttype
					this.search_form.checked = this.checked
				this.$post('/putpay/getPayPutData',this.search_form,res=>{
					let list = res.data.data
					
					for(let item1 of list){
						let newArr = []
						let goods_number = 1
						for(let el of item1.list){
							if(!el.order_number){
								el.order_number = this.$utils.generateRandomString(2)
							}
							if(el.code){
								if(this.ttype==2){
									el.price = el.sales_price
								}
							}else{
								el.price = -el.price
								el.residue_money = -el.residue_money
							}
							
							const res = newArr.findIndex(ol=> {
								if(el.goods_name){
									return el.goods_name == ol.goods_name;
								}
							});
							if (res != -1) {
								newArr[res].goods_number++
								newArr[res].original_amount = newArr[res].goods_number*newArr[res].price
							} else {
								el.goods_number = 1
								el.original_amount = el.price*el.goods_number
								newArr.push(el);
							}
						}
						item1.list = newArr
					}
					
					
					
					let result = []
					
					//  scope.row.residue_money?scope.row.residue_money:scope.row.price
					for(let item of list){
						let goods_number = 0
						let residue_money = 0
						let original_amount = 0
						let len = item.list.length
						item.list[0].sumRowSpan = len+1
						
						for(let ele of item.list){
							// price = price + ele.price*1
							goods_number = goods_number+ele.goods_number*1
							
							ele.residue_money = ele.residue_money?ele.residue_money:ele.price
							ele.residue_money*= ele.goods_number
							residue_money = residue_money + ele.residue_money*1
							
							original_amount = original_amount + ele.original_amount*1
							
						}
						item.list.push(
						 {
							 id:'小计',
							 goods_name:len,
							 goods_number:goods_number,
							 residue_money:residue_money,
							 original_amount:original_amount
						 }
						)
						for(let ele of item.list){
							result.push(ele)
						}
						
						
					}
					this.list = result
					
					this.sumTotal(result)
				})
			},
			clearSearch(){
				this.search_form={
					buyer_person:"",
					supplier:"",
					bank_account:"",
					start_time:'',
					end_time:'',
					customer:""
				}
				this.checked = false
				let now = this.$utils.formatNowDate(2)
				this.time = [now,now]
				this.lodeList()
			},
			getCustomerName(val){
				if(this.ttype==1){
					this.search_form.supplier = val
				}else{
					this.search_form.customer = val
				}
				
			}, 
           
            
        }
    }
</script>
<style>
	.el-table .warning-row {
	    background: oldlace;
	  }
	
	  .el-table .success-row {
	    background: #f0f9eb;
	  }
</style>
